<template>
  <view>
    <view class="bg-top">
      <view class="action sub-title" style="position: relative;top:60px;left:20px">
        <text class="text-bold text-white" style="font-size: 26px;">登录·骑手端</text>
        <view class="bg-red" style="width:3.3rem;height: 5px;"></view>
      </view>
    </view>
    <view class="main-login-box">
      <view class="logo" style="margin: 40px 0 10px 0;">
        <image src="/static/logo.png" mode="widthFix" style="width: 65px;"></image>
      </view>
      <view class="phone">
        <input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone"></input>
      </view>
      <view class="password">
        <input type="password" placeholder="请输入密码" maxlength="10" name="password" v-model="password"></input>
      </view>
      <view class="tips">
        登录即同意 <text class="text-green">《水院镖局骑手用户协议》</text>
      </view>
      <view class="btn">
        <button class="bg-green" @click="login()">登 录</button>
        <button class="bg-white" style="color:#39b54a;border:2px solid #39b54a;" @click="cancel()">
          取消
        </button>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        //手机号
        phone: '',
        password: ''
      }
    },
    methods: {
      ...mapActions('m_runner', ['hasItBeenRegistered']),
      ...mapMutations('m_runner', ['updateRunnerInfo','updateToken']),
      //取消返回用户登录
      cancel() {
        uni.navigateBack()
      },
      async login() {
        if (!this.phone) {
          uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          });
          return;
        }
        if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
          uni.showToast({
            title: '请输入正确手机号',
            icon: 'none'
          });
          return;
        }
        const res = await this.hasItBeenRegistered(this.phone)
        if (!res.isRegistered) {
          uni.showToast({
            title: '手机号不存在，请前往认证！',
            icon: 'none'
          });
          const timer = setTimeout(() => {
            uni.navigateTo({
              url: '/pages/authentication/authentication'
            })
            clearTimeout(timer)
          }, 2000)

        } else if (this.password === res.runnerInfo.password) {
          this.updateRunnerInfo(res.runnerInfo)
          console.log(res.runnerInfo);
          uni.showToast({
            title: '登录成功！',
            icon: 'none'
          });
          //自定义一个随机token
          const newtoken = this.generateToken();
          this.updateToken(newtoken)
          const timer = setTimeout(() => {
            uni.navigateTo({
              url: '/subpkg-runner/runner-person-center/runner-person-center'
            })
            clearTimeout(timer)
          }, 2000)

        } else {
          uni.showToast({
            title: '密码错误！',
            icon: 'none'
          });
        }

      },
      //生成随机token
      generateToken() {
        let token = '';
        const tokenLength = 32;
        const possibleChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for (let i = 0; i < tokenLength; i++) {
          token += possibleChars.charAt(Math.floor(Math.random() * possibleChars.length));
        }
        return 'Bearer ' + token;
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ecfdfa;
  }

  .bg-top {
    height: 250px;
    width: 100%;
    background-color: #2aba66;
    border-radius: 15em/3em;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    overflow: hidden;
  }

  .main-login-box {
    position: relative;
    height: 570px;
    width: 90%;
    border-radius: 20px;
    margin: auto;
    top: -105px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .phone,
    .password,
    .tips {
      width: 90%;
      color: darkgray;
      margin: 20px 0;
    }

    .phone,
    .password {
      padding: 10px 5px;
      font-size: 16px;
      border-bottom: 1px solid darkgray;
    }

    .btn {
      position: absolute;
      width: 90%;
      bottom: 10px;
    }

    .btn button {
      font-size: 28rpx;
      color: #fff;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 50rpx;
      box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
      margin: 20px 0;
    }
  }
</style>